<template>
  <div id="app">
    <div class="question-header">
      <span>
        {{currentIndex}}/{{this.questionData.length}}
      </span>
      <p>{{questionOpt.id}}.{{questionOpt.label}}</p>
    </div>
    <div class="question-content">
      <button @click="handleClick(0, questionOpt.index)" :class="{active: this.currentAnswer === 0}">A、是</button>
      <button @click="handleClick(1, questionOpt.index)" :class="{active: this.currentAnswer === 1}">B、否</button>
    </div>
    <div class="question-footer">
      <p @click="handlePrev" v-if="this.index !== 0">
        <!-- <p @click="handlePrev"> -->
        <span></span>
        上一题
      </p>
    </div>
  </div>
</template>

<script>
import http from '../../service/http'
export default {
  name: 'App',
  data() {
    return {
      questionData: [],
      questionOpt: {
        id: '',
        label: '',
        index: 0
      },
      // answer: [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
      answer: [],
      index: 0,
      currentAnswer: null
    }
  },
  created() {
    http.questionsServer({}, ([res, data]) => {
      this.questionData = data.data
      this.questionOpt = { ...this.questionOpt, ...this.questionData[0] }
    })
  },
  computed: {
    currentIndex() {
      if (this.index < this.questionData.length) {
        return this.index + 1
      } else {
        return this.questionData.length
      }
    }
  },
  methods: {
    handleClick(val, idx) {
      if (this.index === this.questionData.length) {

        console.log('最后一道题')
        return
      }
      let arry = this.answer
      // let param = {
      //     choice: val,
      //     question: this.questionOpt.id
      // }
      this.currentAnswer = val
      if (this.answer[this.index] === void (0)) {
        this.index += 1
        this.questionOpt = { ...this.questionOpt, ...this.questionData[this.index] }
        this.questionOpt.index = this.index
        arry.push(val)
        this.answer = arry
        this.currentAnswer = null
      } else {
        arry.splice(this.index, 1, val)
        this.index += 1
        this.questionOpt = { ...this.questionOpt, ...this.questionData[this.index] }
        this.questionOpt.index = this.index

        this.answer = arry
        this.currentAnswer = null
      }
    },
    handlePrev() {
      if (this.index === 0) return
      this.index -= 1
      this.questionOpt = { ...this.questionOpt, ...this.questionData[this.index] }
      this.questionOpt.index = this.index

      this.currentAnswer = this.answer[this.index]

      // http.submitQuestionsServer({ answer: this.answer }, ([res, data]) => {
      //   window.sessionStorage.setItem('key', JSON.stringify(data.data))
      //   window.location.replace('/result.html')
      // })
    }
  },
  watch: {
    index(newValue) {

      if (newValue === this.questionData.length) {

        http.submitQuestionsServer({ answer: this.answer }, ([res, data]) => {

          window.sessionStorage.setItem('key', JSON.stringify(data.data))
          window.location.replace('result.html')
        })
      }

    }
  }
}
</script>

<style lang="less" scoped>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.question-header {
  background-color: #d8e7fe;
  width: 100%;
  height: 3rem;
  font-size: 0;
  //   display: flex;
  //   align-items: center;
  padding: 0.32rem;
  p {
    font-size: 0.32rem;
    margin-top: 1rem;
  }
  span {
    font-size: 0.3rem;
    float: right;
  }
}
.question-content {
  margin-top: 0.32rem;
  display: flex;
  flex-direction: column;
  padding: 0.16rem;
  button {
    border: 1px solid #d8e7fe;
    list-style: none;
    margin: 0.16rem;
    height: 1rem;
    border-radius: 0.1rem;
    background-color: #ffffff;
    text-align: left;
  }
  button:focus {
    outline: none;
  }
  button:active {
    background-color: #d8e7fe;
    color: #fff;
  }
  .active {
    background-color: #d8e7fe;
    color: #fff;
  }
}
.question-footer {
  span {
    display: inline-block;
    width: 0.64rem;
    height: 0.32rem;
    background-image: url(../../assets/jiantou.png);
    background-size: 100% 120%;
    background-repeat: no-repeat;
    background-position-x: 0.32rem;
  }
  p {
    font-size: 0.32rem;
  }
}
</style>
